<!--
 * @description  :
 * @descriptionDetail:
 * @copyright    : 浙江烟草
 * @author       : mhb
 * @create       : 2023-01-17 11:06:06
-->
/**
 * @description  : 通知公告列表
 * @descriptionDetail : 通知公告列表
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 15:47:36
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
      <u-search
        class="nolicence-search"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="标题"
        v-model="searchKey"
        @custom="toSearchList"
      ></u-search>
    </view>
    <view class="content u-page">
      <me-table
        :i="0"
        :index="0"
        :top="110"
        :load-data="loadData"
        :height="getListViewHeight()"
        :init-load="false"
        ref="mescrollItem0"
      >
        <view slot-scope="d" class="list-lay">
          <view class="lt-root" @tap="itemClick(d.data)">
            <view class="left-tag">
              <!-- 通知 -->
              <u-image
                width="80rpx"
                height="80rpx"
                v-if="d.data.noticeType == T_NOTICE_PUBLISH_TYPE.NOTICE"
                mode="scaleToFill"
                style="margin-top:-22rpx"
                shape="circle"
                :src="'/static/notice/NFeedback.jpg'"
              >
              </u-image>
              <!-- 公告 -->
              <u-image
                width="80rpx"
                height="80rpx"
                v-if="d.data.noticeType == T_NOTICE_PUBLISH_TYPE.ANNOUNCEMENT"
                style="margin-top:-22rpx"
                mode="scaleToFill"
                shape="circle"
                :src="'/static/notice/YFeedback.jpg'"
              >
              </u-image>
            </view>
            <view class="content-nt-lay">
              <view class="content-title-lay-special">
                <text class="content-title">
                  {{ d.data.title }}
                </text>
                <u-image
                  width="40rpx"
                  height="40rpx"
                  v-if="d.data.noticeType == T_NOTICE_PUBLISH_TYPE.NOTICE && d.data.isShowFeedback == 1"
                  style="margin:-2rpx 0 0 28rpx;flex-shrink: 0;"
                  mode="scaleToFill"
                  shape="circle"
                  :src="'/static/notice/fedBack.png'"
                >
                </u-image>
                <u-image
                  width="40rpx"
                  height="40rpx"
                  v-if="d.data.urgentDegree == T_NOTICE_URGENCY_STATUS.URGENCY"
                  style="margin:-2rpx 0 0 28rpx;flex-shrink: 0;"
                  mode="scaleToFill"
                  shape="circle"
                  :src="'/static/notice/emergency.png'"
                >
                </u-image>
              </view>
              <view class="content-title-lay">
                <text>发布单位：{{ d.data.publishOrgName }}</text>
              </view>
              <view class="content-title-lay">
                <text>发布时间：{{ d.data.publishTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </me-table>
    </view>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import teamNoticeService from "@/service/team/notice.service";
import {T_NOTICE_PUBLISH_TYPE,T_NOTICE_FEEDBACK_STATUS,T_NOTICE_URGENCY_STATUS,} from "@/service/team/mapping/enum.js";
export default{
  components:{
    meTable,
  },
  mixins:[MescrollMoreMixin,],
  data(){
    return {
      searchKey:"",
      user: this.$storage.get(this.$rp.common.USER),
      T_NOTICE_PUBLISH_TYPE:T_NOTICE_PUBLISH_TYPE,
      T_NOTICE_FEEDBACK_STATUS:T_NOTICE_FEEDBACK_STATUS,
      T_NOTICE_URGENCY_STATUS:T_NOTICE_URGENCY_STATUS,
    };
  },
  onLoad() {
  },
  methods:{
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight;
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight;
      // #endif
      return p  + "px";
    },
    updateBackState(param){
      this.getMescroll(0).triggerDownScroll();
    },
    // 用的工作待办接口筛选数据，不用做分页查询，默认多查一批数据出来
    loadData(page) {
      let param = {
        page: page.num,
        limit: page.size,
        paras:{
          // publishOrg:this.user.user.org.parentOrgUuid,
          publishOrg:"",
          titleLike: this.searchKey,
        },
      };
      return new Promise((resolve) => {
        teamNoticeService.queryNoticeList(param).then(res => {
          if (res.success) {
            resolve({
              count: res.count,
              data: [...res.data,],
            });
          } else {
            resolve({
              count: 0,
              data: [],
            })
          }
        }).catch(err => {
          resolve({
            count: 0,
            data: [],
          });
        });
      })
    },
    itemClick(item){
      this.setRouteParam(item);
      this.$u.route("/pages/notice/noticeInfo");
    },
    toSearchList(){
      this.getMescroll(0).triggerDownScroll();
    },
  },
}
</script>

<style scoped lang="scss">
	.content {
		background-color: #F3F4F5 ;
    min-height: 100%;
	}
  .page{
    padding: 0;
  }
  .nolicence-search-lay {
		background-color: #fff;
		position: fixed;
        // #ifndef H5-DINGDING
        top: 44px;
        // #endif
        // #ifdef H5-DINGDING
        top: 0px;
        // #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
	}
  .nolicence-search {
		padding: $cm-search-padding-row $cm-search-padding-column;
	}
	.list-lay{
		// border-bottom: 2rpx solid $u-border-color;
		padding: 20rpx 20rpx;
		background-color: #FFF;
    margin:20rpx;
    border-radius:15px;
	}
	.lt-root{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		align-items: center;
		align-content: center;
	}
	.left-tag{
    padding: 4px 12px 0 2px
	}
	.content-nt-lay{
		flex: 1;
	}
	.content-title-lay{
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;
    padding: 10rpx 6rpx;
    word-break: break-all;
    flex: 1;
	}
  .content-title-lay-special{
    display: inline-flex;
		flex-direction: row;
    width: 100%;
		align-items: center;
    padding: 10rpx 6rpx;
    word-break: break-all;
    flex: 1;
  }
	.content-title{
		font-weight: 600;
    font-size: 30rpx;
		color: $u-main-color;
	}
	.content-sub-title-lay{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
    padding: 10rpx 6rpx;
    font-size: 26rpx;
    color: $cm-form-subtitle-color;
	}
	.content-sub-title{
		color: $cm-form-subtitle-color;
		font-size: $cm-form-item-label-font-size;
	}
</style>
